<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的响应式方法</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item,index in arr" :key="item">{{index}}---{{item}}</li>
        </ul>
        <button @click="changeArr">更新</button>
    </div>

    <script src="../vue/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                arr:['aaa','bbb','ccc']
            },
            methods: {
                changeArr(){
                    //1.通过arr[]的方式更新数组的值,不是响应式的
                    //this.arr[0] = 'dddd'

                    //2.push,pop,sheft,unsheft,splice,reverse等方法都是响应式的

                    //Vue自己实现的set(更新的对象,更新的下标,更新的值)
                    //Vue.set(this.arr,0,'ddd')
                }
            },
        });
    </script>
</body>
</html>